<template>
	<view class="coupons">
		<view class="my-curpon">
			<view class="my-cu-top u-f">
				<view class="cu-left u-f-c u-f-ajc">
					<text>年化收益率</text>
					<text>+ 1.25%</text>
					<text>持续天数为产品周期</text>
				</view>
				<view class="cu-right u-f-c u-f-ajc">
					<view class="u-f u-f-ajc" style="margin: 10upx 0;">
						<image src="/static/icon-m.png" class="icon-img"></image>
						<text style="font-size: 36upx;font-weight: bold;color: #384A65;">xxxx抵押卷xxx</text>
					</view>
					<view class="my-s-btm1 u-f u-f-ac" style="margin: 10upx 0;">
						<image src="/static/icon1.png" class="icon-img"></image>
						<text class="my-txt1">优惠卷生效中</text>
					</view>
				</view>
				<view class="my-status">已使用</view>
			</view>
			<view class="my-cu-btm u-f u-f-sbc">
				<view class="my-btn-left u-f-c">
					<text>2020-12-20 使用</text>
					<text>2020-12-31 到期</text>
				</view>
				<view class="my-btn-right">使用规则</view>
			</view>
		</view>
		<view class="content">
			<!-- 占位 显示颜色 -->
			<view class="abs u-f"></view>
			<text class="txt-abs">已使用</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.content {
	position: relative;
	height: 300rpx;
	background-color: #efefef;
	margin: 40rpx 20rpx;
	overflow: hidden;
	&::after {
		position: absolute;
		top: -35rpx;
		right: -35rpx;
		display: inline-block;
		content: ' ';
		width: 70rpx;
		height: 70rpx;
		background-color: #efefef;
		transform: rotate(45deg);
	}
	.abs {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		background-color: #ff5a5f;
		top: -100rpx;
		right: -100rpx;
		transform: rotate(45deg);
	}
	.txt-abs {
		position: absolute;
		color: #ffffff;
		font-size: 13px;
		top: 30rpx;
		right: 10rpx;
		transform: rotate(45deg);
	}
}
.coupons {
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
	margin: 0 auto;
}
/* 优惠卷 */
.my-curpon {
	margin-top: 30upx;
	width: 96%;
	height: 340upx;
	background-image: url('~@/static/curpon.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}
.my-cu-top {
	position: relative;
}
.my-cu-top .cu-left {
	color: #ffffff;
	width: 280upx;
	height: 210upx;
	text-align: center;
}
.my-cu-top .cu-right {
	width: 424upx;
	height: 210upx;
	text-align: center;
}
.my-cu-top .cu-left > text {
	margin: 8upx 0;
}
.my-cu-top .cu-left > text:nth-of-type(1) {
	font-size: 28upx;
}
.my-cu-top .cu-left > text:nth-of-type(2) {
	font-size: 40upx;
	font-weight: bold;
}
.my-cu-top .cu-left > text:nth-of-type(3) {
	font-size: 28upx;
}
.my-status {
	width: 108upx;
	height: 48upx;
	line-height: 48upx;
	background-color: #5aeee6;
	color: #ffffff;
	text-align: center;
	font-size: 24upx;
	position: absolute;
	top: 0;
	right: 10upx;
	border-radius: 0 20upx;
}

.cu-right .my-s-btm1 {
	border: 1px solid #ffae89;
	padding: 8upx 24upx;
	border-radius: 12upx;
}
.cu-right .my-s-btm2 {
	border: 1px solid #eeeeee;
	padding: 8upx 24upx;
	border-radius: 12upx;
}

.my-txt1 {
	font-size: 26upx;
	color: #ffae89;
}
.my-txt2 {
	font-size: 26upx;
	color: #cecece;
}
.icon-img {
	width: 38upx;
	height: 38upx;
	margin-right: 20upx;
}

.my-cu-btm {
	width: 90%;
	height: 120upx;
	margin: 0 auto;
}
.my-btn-left {
	color: #a8b2bd;
	font-size: 24upx;
}
.my-btn-left > text {
	margin: 4upx 0;
}
.my-btn-right {
	border: 1px solid #21c2bc;
	font-size: 28upx;
	height: 36px;
	line-height: 36px;
	width: 102px;
	text-align: center;
	color: #21c2bc;
	border-radius: 16px;
}
</style>
